一开始我加了以下的代码：

1
2
3

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

是的，无效，其实这段对不同的浏览器效果有差，不建议使用。

HTTP首部字段结构

只列出部分

1.通用首部字段（请求报文和响应报文都会使用的头部）：

• Cache-Control：控制缓存的行为

  Cache-Control

  1 2 3 4 5 6 7 8

  Cache-Control: max-age=<seconds> Cache-Control: max-age=<seconds> Cache-Control: max-stale[=<seconds>] Cache-Control: min-fresh=<seconds> Cache-control: no-cache ：强制向服务器进行验证（禁止强缓存，协商缓存可用） Cache-control: no-store ：禁止使用缓存 Cache-control: no-transform Cache-control: only-if-cached：从缓存获取资源

• Date：创建报文的日期时间

2.请求首部字段

• if-Modified-Since：比较资源的更新时间

3.响应首部字段

• ETag：资源的匹配信息

4.实体首部字段

• Expires：实体主体过期的日期时间
• Last-Modified：资源的最后修改日期

浏览器缓存分类

目前主流的浏览器缓存分为两类，强缓存和协商缓存，它们的匹配流程如下：

（1）浏览器发送请求前，根据请求头的expires和cache-control判断是否命中强缓存策略，如果命中，直接从缓存获取资源，并不会发送请求。如果没有命中，则进入下一步。

（2）没有命中强缓存规则，浏览器会发送请求，根据请求头的last-modified和etag判断是否命中协商缓存，如果命中，直接从缓存获取资源。如果没有命中，则进入下一步。

（3）如果前两步都没有命中，则直接从服务端获取资源。

发现新打开页面时Status Code都是200 （from disk cache）。然后在此页面上刷新就是304。

强缓存

从from disk cache得知，其实浏览器一直拿的自己的缓存，所以导致根本没有拉到我最新更新的文件，这时只有强制刷新才能拿到（200）。这个状态是强缓存的结果，有expires/cache-control控制：

1.expires(http 1.0版有效)是绝对时间；是http1.0的功能。如果浏览器的时间没有超过这个expires的时间，代表缓存还有效，命中强缓存，直接从缓存读取资源。不过由于存在浏览器和服务端时间可能出现较大误差，所以在之后http1.1提出了cache-control。

2.cache-control的值是相对时间，当浏览器第一次请求资源的时候，会把response header的内容缓存下来。之后的请求会先从缓存检查该response header，通过第一次请求的date和cache-control计算出缓存有效时间。如果浏览器的时间没有超过这个缓存有效的时间，代表缓存还有效，命中强缓存，直接从缓存读取资源。

Expires用时刻来标识失效时间，不免收到时间同步的影响，而Cache-Control使用时间间隔很好的解决了这个问题。 但是 Cache-Control 是 HTTP1.1 才有的，不适用于 HTTP1.0，而 Expires 既适用于 HTTP1.0，也适用于 HTTP1.1，所以说在大多数情况下同时发送这两个头会是一个更好的选择，当客户端两种头都能解析的时候，会优先使用 Cache-Control。

补充一下:Chrome在高版本更新了缓存策略,原来的from cache变成了from disk cache(磁盘缓存)和from memory cache(内存缓存)。

协商缓存(弱缓存)

后面在页面上刷新拿到的304，实际上就是协商缓存的结果。

配置Last-Modified/ETag的情况下，浏览器再次访问统一URI的资源，还是会发送请求到服务器询问文件是否已经修改，如果没有，服务器会只发送一个304回给浏览器，告诉浏览器直接从自己本地的缓存取数据；如果修改过那就整个数据重新发给浏览器；

你可能会觉得使用Last-Modified已经足以让浏览器知道本地的缓存副本是否足够新，为什么还需要Etag（实体标识）呢？HTTP1.1中Etag的出现主要是为了解决几个Last-Modified比较难解决的问题：

1. Last-Modified标注的最后修改只能精确到秒级，如果某些文件在1秒钟以内，被修改多次的话，它将不能准确标注文件的新鲜度
2. 如果某些文件会被定期生成，当有时内容并没有任何变化，但Last-Modified却改变了，导致文件没法使用缓存
3. 有可能存在服务器没有准确获取文件修改时间，或者与代理服务器时间不一致等情形

Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符，能够更加准确的控制缓存。Last-Modified与ETag是可以一起使用的，服务器会优先验证ETag，一致的情况下，才会继续比对Last-Modified，最后才决定是否返回304。Etag的服务器生成规则和强弱Etag的相关内容可以参考，《互动百科-Etag》和《HTTP Header definition》

一般情况下，使用Cache-Control/Expires会配合Last-Modified/ETag一起使用，因为即使服务器设置缓存时间, 当用户点击“刷新”按钮时，浏览器会忽略缓存继续向服务器发送请求，这时Last-Modified/ETag将能够很好利用304，从而减少响应开销。

强缓存与协商缓存总结

1. 强缓存阶段：先在本地查找该资源，如果发现该资源，并且其他限制也没有问题(比如:缓存有效时间)，就命中强缓存，返回200，直接使用强缓存，并且不会发送请求到服务器。（不对服务器发送请求）
2. 弱缓存阶段：在本地缓存中找到该资源，发送一个http请求到服务器，服务器判断这个资源没有被改动过，则返回304，让浏览器使用该资源。（需要发送请求，验证是否可以使用本地缓存）
3. 缓存失败阶段(重新请求)：当服务器发现该资源被修改过，或者在本地没有找到该缓存资源，服务器则返回该资源的数据。

新建页面会先验证强缓存。

F5刷新导致强缓存失效。

ctrl+F5 所有缓存都失效。

启发式缓存

那么问题肯定是缓存造成的，为什么会出现这样的情况，就可以排查了。

发现第一次访问200 （from disk cache）的时候，请求头（Request Header）显示Provisional header are shown,相关信息不能查看。

有这个提示通常可能的情况是：

1. 跨域，请求被浏览器拦截
2. 请求被浏览器插件拦截
3. 服务器出错或者超时，没有真正的返回
4. 强缓存from disk cache或者from memory cache，此时也不会显示

这里就是第4种情况。请求头不带缓存相关字段，如果本地缓存版本有效，从缓存读取，不发请求，并显示个假请求头。

找到了一篇很受启发的文章：

【腾讯Bugly干货分享】彻底弄懂 Http 缓存机制 - 基于缓存策略三要素分解法

因为这里的请求头不带缓存相关字段，所以使用了缓存过期的策略，影响要素在于：在没有任何缓存相关字段的情况下，客户端计算响应头中2个时间字段Date和Last-Modified之间的差值，取该值的10%作为缓存过期周期。这段时间内会直接使用本地缓存数据而不会再去请求服务器（强制请求除外），缓存过期后，会再次请求服务端，并携带上 Last-Modified 指定的时间去服务器对比并根据服务端的响应状态决定是否要从本地加载缓存数据。

接着对比实际的返回头发现，问题果然出现在Last-Modified。在这个问题页面里，Last-Modified的这个时间值竟然不会变，似乎一直停留在了5月份。

后来发现似乎是gitlab ci构建镜像输出的生产文件时间有误，经过修正又恢复了正常。。。

cookie和session

cookie和session都是为了弥补http协议的无状态特性，对server端来说无法知道两次http请求是否来自同一个用户，利用cookie和session就可以让用户只登录一次，server就知道某个请求是否需用重新登录。

1. cookie：客户端第一次正常访问服务器，服务器在response headers中返回与用户信息相关的cookie，客户端收到后把cookie保存在本地，下次再发请求时会在request headers中带上这个cookie，服务器收到这个cookie就知道用户状态了。cookie可以设置过期时间，默认值是-1，表示关闭浏览器时cookie就会失效，值为0时表示立马失效，相当于删除cookie（cookie没有删除的方法），服务器和客户端都可以设置cookie，但不可以操作另一个域名下的cookie。

2. session: 客户端第一次正常访问服务器，服务器生成一个sessionid来标识用户并保存用户信息（服务器有一个专门的地方来保存所有用户的sessionId），在response headers中作为cookie的一个值返回，客户端收到后把cookie保存在本地，下次再发请求时会在request headers中带上这个sessionId，服务器通过查找这个sessionId就知道用户状态了，并更新sessionId的最后访问时间。sessionId也会可以设置失效时间，比如如果60分钟内某个session都没有被更新，服务器就会删除这个它。

所有，cookie是保存在客户端，session是存在服务器，session依赖于cookie。

备注：https://docs.gitlab.com/ee/ci/yaml/README.html#git-strategy(强制gitlab ci时候每次都通过clone来获取代码，以确保拿到代码时间戳是构建开始时间):

1
2

variables:
  GIT_STRATEGY: clone

其他参考：

《图解HTTP》

Web缓存机制系列

浅聊HTTP缓存 (HTTP Cache)

用这个例子来做修改，修改的功能点如下，也是原作者留白的内容

• 游戏中字体的更换

• 地面应该和小恐龙底部持平，而非屏幕底部，如何实现？

• 现在三种苹果和炸弹的出现概率是随机的，如何调整它们各自的出现概率？

• 现在苹果和炸弹出现的时间间隔是固定的，如何随着游戏进行加快节奏？

• 如何调整游戏难度梯度？

• 现在炸弹和苹果有可能会相邻出现，导致很难接到苹果而不碰到炸弹，如何避免？

游戏中字体的更换

1
2
3
4

title = game.add.text(game.world.centerX, game.world.height * 0.25, '0', {
                   font:'bold 60px Helvetica',
                   fill:'#f2bb15'
               });

地面应该和小恐龙底部持平，而非屏幕底部，如何实现？

首先应该实现一个地板，

1

game.load.image('ground', '//peiwan.bs2dlssl.huanjuyun.com/da38bffbb5954779887ad623c5cc2b10.png');//预先加载地板的图片

像加man一样加到场景中：

1
2
3
4
5
6

//地面 
platforms =game.add.sprite(game.world.centerX, game.world.height * 0.84 , 'ground');
var groundImg = game.cache.getImage('ground');
platforms.width = game.world.width;
platforms.height = platforms.width/groundImg.width * groundImg.height;
platforms.anchor.setTo(0.5, 0);

注释掉苹果与游戏边缘碰撞的代码，因为现在要变成苹果与地板的碰撞。这里还是用物理碰撞overlap。

所以要碰撞的两个物体都要加入物理系统，才能开启物体的物理特性，苹果已经加入了，现在加入地板的：

1

game.physics.enable(platforms);

开启物理特性后的对象后就有了body属性，我们这里要用到body的allowGravity（是否启用重力效果）；如果不用的话默认是true，它放在游戏里后就会自动下落直到出边界，很明显我们不是要这样的效果，地板是不用下沉的。

1

platforms.body.allowGravity = false;

最后跟man和apples一样检测碰撞并且执行碰撞后的函数就可以了

1
2
3
4
5
6

game.physics.arcade.overlap(platforms,apples,failgame,null ,this);
...
function failgame(platforms, apple){
             apple.kill();
             if (apple.type !== 'bomb') game.state.start('over', true, false, score);
        }

在设置地板的过程中，开了debug，敲好用：

1
2
3

this.render=function(){
    game.debug.body(platforms);           
},

拓展一下，如果我的苹果掉落不需要消失，而是停留在地面上呢？

首先要知道，在Arcade物理引擎中，碰撞检测主要用到两个函数，一个是collide，还有一个是overlap。

collide方法与overlap的区别在于collide会影响两个要检测的对象之间的物理状态，比如使用collide函数去检测两个物体，如果物体碰撞了，那么这两个物体之间就会有力的相互作用，可能其中一个会被另一个弹开，或者两个之间相互弹开。

但如果使用overlap方法的话，则只会检测两个物体是否已经碰撞了，或者说已经重叠了，并不会产生物理作用。

所以如果是这样的情况，我们要使用collide来进行碰撞检测：

1

game.physics.arcade.collide(platforms, apples);

同时，地板需要在加一个属性：immovable,不设置的话，地板会被苹果砸下去

1

platforms.body.immovable = true;//设置是否固定不动

现在三种苹果和炸弹的出现概率是随机的，如何调整它们各自的出现概率？

首先看原来的代码：

1
2
3
4
5
6
7
8
9
10
11
12

// 添加苹果组
var apples = game.add.group();
// 苹果类型
var appleTypes = ['green', 'red', 'yellow'];
var appleTimer = game.time.create(true);
appleTimer.loop(1000, function() {
    var x = Math.random() * game.world.width;
    var y = Math.random() * game.world.height;
    var type = appleTypes[Math.floor(Math.random() * appleTypes.length)];
    apples.create(x, y, type);
});
appleTimer.start()

add和loop两个方法，分别对应setTimeout和setInterval，效果是每隔1秒就会在屏幕随机位置出现一个苹果了，而且种类是随机的。

可以看出，掉落的种类主要是这一句：

var type = appleTypes[Math.floor(Math.random() * appleTypes.length)]。

简单来说就是[0,1,2,3] 这个数组随机选一个随机数，现在我们要求的是给他们加权重，来选择随机数.

1
2
3
4
5
6
7
8

function weightedRand(spec) {
  var i, sum=0, r=Math.random();
  for (i in spec) {
    sum += spec[i];
    if (r <= sum) return i;
  }
}
weightedRand({0:0.4, 1:0.2, 2:0.1,3:0.3});

1

var type = appleTypes[weightedRand({0:0.4, 1:0.2, 2:0.1,3:0.3})];

现在苹果和炸弹出现的时间间隔是固定的，如何随着游戏进行加快节奏？

原代码：

1

appleTimer.loop(1000, function () {})

所以我们首先要想获取游戏时间，然后让时间间隔随着游戏时间的增加来减少。

this.game.time.totalElapsedSeconds()可以计算从打开页面到现在的时间。demo

我想了下觉得，无限循环loop有些不适用,改成game.time.events.add(loopTime, appleDown,this);

苹果/炸弹的添加用个appleDown函数包起来，定义一个变量appleTimeInterval来记录游戏时间,根据游戏时间修改loopTime（间隔）。

1
2
3
4
5
6
7
8
9
10
11
12

function appleDown() {
    ...
        /*以下为新增*/
       appleTimeInterval= game.time.totalElapsedSeconds();
       if(appleTimeInterval>10 && appleTimeInterval<20){
            loopTime = 1000;
        }else if(appleTimeInterval>20){
             loopTime = 500;
        }
        console.log(loopTime)
        game.time.events.add(loopTime, appleDown,this); 
}

如何调整游戏难度梯度？

这比较笼统了，可以设定炸弹出现的频率或者缩短apple的时间间隔？

现在炸弹和苹果有可能会相邻出现，导致很难接到苹果而不碰到炸弹，如何避免？

这个问题看这段:

1
2
3

var x = Math.random() * game.world.width;
var type = appleTypes[weightedRand({0:0.4, 1:0.2, 2:0.1,3:0.3})];              
var apple = apples.create(x, 0, type);

所以只要对比x的值，如果炸弹的x值跟上一个苹果的值太接近，我们就重新生成x的值：定义一个用来保存上一个x值的变量lastAppleX，当生成是炸弹时，才需要进行对比。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var appleWidth = game.world.width / 8;
var x = Math.random() * game.world.width;
var type = appleTypes[weightedRand({ 0: 0.4, 1: 0.2, 2: 0.1, 3: 0.3 })];

  if (type == 'bomb') {
      var twoDistance = Math.abs(lastAppleX - x);
      console.log('间隔:' + twoDistance)
      if (twoDistance < appleWidth) {
          console.log('间隔太小')
          appleDown();
          return;
      } 
    var apple = apples.create(x, 0, type);
    lastAppleX = x; //记录上一个x                   
    apple.type = type;

写到这里我又想起，如果是上一个是炸弹，然后是苹果呢？所以还要记录下type,并修改当本次与上次掉落不同东西才去对比：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

if (type !== lastType) {
   console.log('different type')
   var twoDistance = Math.abs(lastAppleX - x);
   console.log('间隔:' + twoDistance)
   if (twoDistance < appleWidth) {
       console.log('间隔太小')
       appleDown();
       return;
    }
}
var apple = apples.create(x, 0, type);
lastAppleX = x; //记录上一个x                   
apple.type = type;
lastType = apple.type;//记录上一个type

至此也就完成了原作者留白的功能点。但是如果要用到实际的项目中，我们还是可以再拓展。

运营活动中可能还需要这个游戏做些什么呢？

1. 派券

   根据最后玩的分数，派出不同的券，假设50分以下为“30-5”优惠券，50-100分为“30-10”优惠券，100分以上是“20-10”优惠券。

   这里涉及几个必须的点：

   • 控制数量/成本,假设我有“30-5”的券20张，”30-10“的券10张，”20-10”的券5张；
   • 控制设备防刷，假定每个人每台设备一天只能玩一次；

2. 分享

   这几乎是必然有的，微信分享本人的分数到朋友圈或者微信好友

3. …

1、2点涉及到游戏的over状态，取score值。根据score来操作即可。

控制设备的在游戏的preload开始场景，可以在这里进行判断，如果不符合则加载另外的提示，有时候也需要在over状态进行提示，可能用户不在乎领券只是想玩一下。

分享的可以有一个静态h5来替换游戏地址，上面显示用户分数。

修改后代码地址：
https://github.com/anchen1204/game/blob/master/pharser-apple-example1/demo/game.js

参考:

https://www.phaser-china.com/example.html

https://ryangun.github.io/2018/01/04/Phaser%E5%9F%BA%E7%A1%80%E7%AF%87%E4%B8%8A/

hexo迁移

因为我的笔记本电脑最近瓦特了，所以不得不把博客迁出来，在这里做个记录，方便下次查找。

• 将原来的电脑上原有的hexo目录拷贝到新电脑，只需拷贝以下目录：

  • _config.yml
  • package.json
  • scaffolds/
  • source/
  • themes/

• 在新电脑安装hexo

  npm install -g hexo

• 安装后进入hexo/目录

• 安装模块

  1 2 3 4

  npm install npm install hexo-deployer-git --save npm install hexo-generator-feed --save npm install hexo-generator-sitemap --save

• 然后重新配置github

  1 2	git config --global user.name "YOUR NAME" git config --global user.email "YOUR EMAIL ADDRESS"

  Authenticating with GitHub from Git

  • 在 Git Bash 下执行如下命令，生成 SSH key

    ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

    email为自己的github账号，剩下的一路回车即可。

  • 将 SSH key 添加到 ssh-agent

    • 在 Git Bash 下执行如下命令，开启 ssh-agent

    eval "$(ssh-agent -s)"

    • 将这个 SSH key 添加到 ssh-agent 里去

    ssh-add ~/.ssh/id_rsa

  • 将 SSH key 添加到 Github 账户

    • 在 Git Bash 中将 SSH Key 拷贝出来：

    clip < ~/.ssh/id_rsa.pub

    此时，SSH Key 已经在我们的剪切板里了。然后登录 Github 帐号，依次点击自己的头像，Settings，SSH and GPG keys， Add SSH key， 在 Title 这里输入 Key 的label，比如 your_name - PC，然后在 Key 里面把 SSH Key 粘贴进去，点击 Add SSH key 大功告成。

  • 测试 SSH 连接，在 Git Bash 中敲入

  ssh -T git@github.com

• 做完上面这些后 执行hexo deploy 大功告成

• 但是我还是报错，hexo error fatal httprequestexception encountered….

  后来在https://github.com/hexojs/hexo/issues/3043 这里找到解决方法

  把repo的配置方式改一下，任何就可以了。

  1 2 3 4

  deploy: type: git repo: git@github.com:anchen1204/anchen1204.github.io.git branch: master

  以上方法结合了这两篇文章：

  hexo：更换电脑，如何继续写博客

  多机更新 Hexo 博客

JavaScript

Object.assign()

语法：Object.assign(target, ...sources );

参数：

target：必需。可枚举属性复制到的对象。

…sources：必需。从其中复制可枚举属性的对象。

实例：

1
2
3
4
5

var first = { name: "Bob" };
var last = { lastName: "Smith" };

var person = Object.assign(first, last);
console.log(person);//{ name: "Bob", lastName: "Smith" }

看阮一峰大神的ES6-编程风格 :

对象尽量静态化，一旦定义，就不得随意添加新的属性。如果添加属性不可避免，要使用Object.assign方法。

1
2
3
4
5
6
7
8
9
10
11

// bad
const a = {};
a.x = 3;

// if reshape unavoidable
const a = {};
Object.assign(a, { x: 3 });

// good
const a = { x: null };
a.x = 3;

Promise

阅读(按左到右顺序)： 使用 Promises Promise

这两天又看了一遍Promise的内容，觉得这个对象真的非常好用。

做个总结呗，其实在项目中已经快乐地用起来了，很方便。

它存在的意义？还不是因为javaScript是世界上最好的…不对，说错台词了，应该是javaScript是单线程语言。

我们经常为了解决这个问题，使用的是回调函数，俗称callback，为了达到异步执行。比如setTimeout ,比如AJAX异步操作。

具体介绍不表，可以看文档。直接说使用吧。

1

new Promise( function(resolve, reject) {...} /* executor */  );

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

new Promise((resolve, reject) => {
    console.log('Initial');

    resolve();
})
.then(() => {
    throw new Error('Something failed');
        
    console.log('Do this');
})
.catch(() => {
    console.log('Do that');
})
.then(() => {
    console.log('Do this whatever happened before');
});

.then()是链式调用，获取上一个Promise resolve返回的对象进行操作；

.catch() 原理同then，但是是针对Promise 的reject返回的对象进行操作；

注意：在一个失败操作（即一个 catch）之后可以继续使用链式操作，即使链式中的一个动作失败之后还能有助于新的动作继续完成。

即链式调用不会因为其中一个环节失败(reject)而中断。

好用组合：

Promise.resolve() &Promise.reject()

这两个是手动创建一个已经resolve或者reject的promise快捷方法。

Promise.race() 和Promise.all()

这两个用法一样，其实括号内都是多个Promise对象

但是不同的地方在于：

Promise.all(iterable) 方法返回一个 Promise 实例，此实例在 iterable参数内所有的 promise 都完成（resolved），或参数中不包含 promise 时回调完成（resolve）；如果参数中 promise 有一个失败（rejected），此实例回调失败（reject），失败原因的是第一个失败 promise 的结果。

Promise.race(iterable)方法返回一个 promise，一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝。

一句话，前者如果有一个失败，则之间返回第一个失败(catch里)；后者只会返回第一个处理的失败或者成功。

举个实际可能会使用的例子：

Promise.all是很适合来解决多个Promise是用于获取请求基本信息，比如app里的登陆信息，ticket，版本号，它们都获取成功后可以接着执行可能下一步的请求。。。

Promise.race很适合容错现象，比如接口超时：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//网络超时写法：Promise.race()
let promise1 = new Promise(resolve=>{
    setTimeout(()=>{
        return '数据已返回';
    },5000)
})
let promise2= new Promise(reject=>{
    setTimeout(()=>{
        reject('网络超时')
    },4000)
})
Promise.race([promise1,promise2]).then(res=>{
    console.log(res)
}).catch(res=>{
    console.log(res)
})

原型

之前写过一个使用：javascript对象和原型 ，虽然在那个项目里这么用了，其实还是一知半解，这几天重新翻了下《你不知道的JavaScript 上卷》

首先，Javascript是面向对象的语言，它没有类；

翻出n久前做的一个笔记：

1. 所有的函数对象都有一个prototype属性，这个属性引用了一个对象，就是原型（对象）；

1. 普通对象的内部_proto_指向它构造函数的prototype，原型对象也是普通对象的一种；

2. 原型对象主要用于继承，js在创建对象时，都有一个_proto的内置属性，用于指向创建它的函数对象的原型对象prototype

3. 原型和原型链是js实现继承的一种模型，原型链的形成靠_proto_,而不是prototype;

4. 能修改prototype指向的对象，为prototype赋予一个不同的对象，可以实现一种简单的继承；

5. 访问一个对象的原型可以使用ES5中的Object.getPrototype()方法，或ES6中的_proto_属性

   ​

然后在chrome浏览器做一个试验

• 函数有一个特殊特性，所有的函数默认都会拥有一个prototype的公有且不可枚举的属性，它会指向另一个对象，通常称为这个函数的原型对象。就是说，User函数的原型可以通过User.prototype来访问。

• 打印了User.prototype可以看的原型对象默认有一个公有的属性，constructor，这个属性引用的是对象关联的函数，就是说这里 User.prototype.constructor === User;

• 此外，可以看到通过构造函数调用new User( )创建的对象u，也有一个.constructor属性，指向“创建这个对象的函数”，也就是a.constructor ===User;

• 构造函数：User函数其实是一个普通的函数，可是为什么它会认为是一个“构造函数”，原因是，在普通的函数前面加上new关键字后，就会把这个函数调用变成一个“构造函数调用”。new会劫持所有普通函数并用构造对象的形式来调用它。就是说函数不是构造函数，但是当且仅当使用new时，函数调用会变成“构造函数调用”

• 普通对象的内部_proto_指向它构造函数的prototype，原型对象也是普通对象的一种,也就是说

  1 2 3

  u.__proto__===User.__proto__ //true u.__proto__===User.prototype //true u.prototype //undefined,原因，u并不是一个函数对象，它只是一个对象，var u = ....

​

我们给User.prototype设置了一个toString()函数，u是可以访问到的。

同样的，u.__proto__代表指向它构造函数的prototype，其实也是等于User.prototype.

那什么是原型链？如果一个原型对象的原型不为null，就是原型链，我们可以通过__proto__来遍历原型链（ES6）

那ES5的继承和ES6的继承有什么区别？

ES5的继承是通过prototype或构造函数机制来实现。ES5的继承实质上是先创建子类的实例对象，然后再将父类的方法添加到this上（Parent.apply(this)）。

ES6的继承机制完全不同，实质上是先创建父类的实例对象this（所以必须先调用父类的super()方法），然后再用子类的构造函数修改this。

具体的：ES6通过class关键字定义类，里面有构造方法，类之间通过extends关键字实现继承。子类必须在constructor方法中调用super方法，否则新建实例报错。因为子类没有自己的this对象，而是继承了父类的this对象，然后对其进行加工。如果不调用super方法，子类得不到this对象。

ps：super关键字指代父类的实例，即父类的this对象。在子类构造函数中，调用super后，才可使用this关键字，否则报错。

如何判断一个变量是对象还是数组？

第一念头是使用typeof，但是是有问题的，因为数组也是对象的一种，这个问题的问法其实应该是，如何判断一个对象是数组。

1
2

var b = [1,2,3];
typeof b;//"object"

• instanceof操作符

  这个操作符是检测对象的原型链是否指向构造函数的prototype对象的。

  1 2	var arr = [1,2,3,1]; alert(arr instanceof Array); // true

• 对象的constructor属性

  每个对象都有constructor的属性，指向“创建这个对象的函数”

  1	arr.constructor == Array //true

• Object.prototype.toString

  Object.prototype.toString的行为：首先，取得对象的一个内部属性[[Class]]，然后依据这个属性，返回一个类似于”[object Array]”的字符串作为结果(看过ECMA标准的应该都知道，[[]]用来表示语言内部用到的、外部不可直接访问的属性，称为“内部属性”)。利用这 个方法，再配合call，我们可以取得任何对象的内部属性[[Class]]，然后把类型检测转化为字符串比较，以达到我们的目的。

  1 2 3 4 5 6

  function isArrayFn (o) { return Object.prototype.toString.call(o) === '[object Array]'; } var arr = [1,2,3,1]; alert(isArrayFn(arr));// true

  call改变toString的this引用为待检测的对象，返回此对象的字符串表示，然后对比此字符串是否是’[object Array]’，以判断其是否是Array的实例.

• Array.isArray()

  ECMAScript5将Array.isArray()正式引入JavaScript，目的就是准确地检测一个值是否为数组。

  IE9+、 Firefox 4+、Safari 5+、Opera 10.5+和Chrome都实现了这个方法。

  但是在IE8之前的版本是不支持的。

• 1 2 3 4 5 6 7 8 9 10 11 12

  var arr = [1,2,3,1]; var arr2 = [{ abac : 1, abc : 2 }]; function isArrayFn(value){ if (typeof Array.isArray === "function") { return Array.isArray(value); }else{ return Object.prototype.toString.call(value) === "[object Array]"; } } alert(isArrayFn(arr));// true

  typeof Array.isArray === “function” 来判断浏览器支不支持用isArray，不支持的话用Object.prototype.toString。因为Object.prototype.toString对识别内置对象时往往十分有用，但对于自定义对象就可能识别不出。

Promise

Promise是ES6为了解决异步编程所诞生的，主要用于ajax请求，回调函数，复杂操作判断。

PS：异步操作解决方案：Promise、Generator、定时器、还有ES7的async

document.visibilityState && document.hidden

PageVisibility API是用来判断页面可见性，即浏览器标签页被隐藏或者显示的判断。

document.visibilityState：

• visible：页面内容至少部分可见，即可能是已更非最小化窗口的可见标签页
• hidden：页面内容对用户不可见，即可能是后台标签页或者最小化窗口等
• prerender：网页内容被预渲染且用户不可见
• unloaded：网页被卸载

一般我们使用document.hidden就可以满足需求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

function getHiddenProp(){
    var prefixes = ['webkit','moz','ms','o'];
    
    // if 'hidden' is natively supported just return it
    if ('hidden' in document) return 'hidden';
    
    // otherwise loop over all the known prefixes until we find one
    for (var i = 0; i < prefixes.length; i++){
        if ((prefixes[i] + 'Hidden') in document) 
            return prefixes[i] + 'Hidden';
    }
 
    // otherwise it's not supported
    return null;
}

function isHidden() {
    var prop = getHiddenProp();
    if (!prop) return false;
    
    return document[prop];
}

http://www.css88.com/archives/6103

此属性需要注意兼容性。

• 做一个保存草稿的页面，每隔十分钟会自动保存一次，如果在多个页面中打开了同一页面，怎样确保往数据库里存的是用户想要保存的内容。

  sessionStorage + 修改时间戳，做异步写入，然后用事件节流的方式

querySelector和querySelectorAll

这个为H5新特性。

• querySelector:返回指定元素节点的子树中匹配选择器的集合中的第一个元素，如果没有返回null
• querySelectorAll:按文档顺序返回指定元素节点的子树中匹配选择器的元素集合，如果没有匹配返回空集合

1
2
3
4
5
6
7
8
9
10
11
12

<div id="test">
        <div class="dialog">
            <p>123</p>
            <span>456</span>
            <div>789</div>
            <div class="text">452</div>
        </div>
    </div>
    
 var test=document.querySelector('#test');
        var subDivs = test.querySelectorAll('div');
        var text = document.querySelectorAll('div[class=text]');

兼容性
IE8+（含）,针对mobile更优化

有bug

[译]你所不了解的querySelector

​

Web相关

XSS

浅析前端安全之 XSS

看了上面那篇文章意识到一个很大的问题，因为我之前没有仔细想这方面的东西。但是我遇到过一次，表单中用户名以html形式渲染<h1>123</h1>,他的名字设置为类似这样，结果json传回来后渲染到页面变成123 标题样式。

解决我方法是，我在输入表单这一块，先encodeURIComponent解析，发给后台，然后对收到json的这个数据使用decodeURIComponent进行解码。

vue中不使用v-html之类，直接 输出，使用转义功能。

要慢慢把以前的项目规范起来，防止漏洞才行，以后也要注意这一方面，有空再和后端探讨一下。

跨域

首先说下我在实际项目中遇到的问题:

• 一般都是Ajax请求的跨域问题，需要后端配合。

1
2
3
4
5
6
7

$.ajax({
    url: 'xxx',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "onBack",    // 自定义回调函数名
    data: {}
});

​ jsonp缺点：只能实现get一种请求。

遇到的一个错误Uncaught SyntaxError: Unexpected token :

这是因为后台直接给我返回json，而我用jsonp请求，简单说下后台返回的格式：

1
2

// jsonStr：json格式的数据
return  "jsonpCallback(" + jsonStr+ ");" ;

1
2
3
4
5

//jsonp
jsonpCallback({
    "url": "1234",
    "name": "abcd"
})

• iframe跨域

为什么会遇到这个问题，因为有次项目有个手机绑定uid的功能，需要用到第三方的手机验证登陆模块。

iframe地址为：a.yy.com/…

我的页面地址为：b.yy.com/…

这个时候会产生跨域问题，需要在两个页面里加代码：

1

document.domain = 'yy.com';

今天看到的这篇文章基本把所有跨域和解决方法列得很全面了：

前端常见跨域解决方案（全）

Vue

MVVM

最近被一篇文章刷屏了：别了，jQuery

文末那段话真实醍醐灌耳：

“开发中使用库当然没问题，但前提是不要仅仅只知道怎么使用，更要知道它的工作原理。如果不能超越这些库，那在这些库变成你的拐杖之时，你也会随之“残废”。在使用某个库之前，一定要花时间学习掌握JavaScript和DOM。我们从一开头就强调“知其所以然”的重要性，告诉大家不能满足于仅仅“知其然”。如果使用了库，却不晓得其背后原理，无论对自己还是对产品都将是有害的。”

Ray建议，学习前端开发，本来应该是这个顺序：

1. 学习JavaScript
2. 学习Web API
3. 学习jQuery（或其他框架/库）

但很多人实际上是从#3开始的，然后过了很久才开始#1和#2（甚至从来没想过#1和#2）。结果就是“只知其然，而不知其所以然”。

说来惭愧，我就是那个从#3开始的人，所以现在确实业务代码写了很多，工作似乎都能完成，但是只有自己知道，面试的时候就知道，基础不行。不过没事，总有一天可以行的。

好了，回到正文：MVVM：

Model–view–viewmodel (MVVM) is a software architectural pattern.

MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。

把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

• 常用的MVVM框架有：Angular，Backbone.js和我现在经常用的Vue.js

• 单向/双向绑定：

  Vue为例，直白一点理解就是，单向绑定意思如下：

  1	<p>{{data}}</p> //负责显示的是DOM节点可以用{{ }}来引用Model的属性

  双向绑定意思如下：

  1	p><input v-model="email"></p> // 使用v-model指令，把这里的input和Model里的某个属性做双向绑定

• 同步

  1 2 3 4 5 6 7 8

  <ol> <li v-for="t in todos"> <dl> <dt>{{ t.name }}</dt> <dd>{{ t.description }}</dd> </dl> </li> </ol>

  根据Modal里的todos变化，比如数组增加或减少，这里html会相应的进行DOM节点的增加或减少，完全由数据决定，开发者无需去关注html的DOM节点。

  Vue之所以能够监听Model状态的变化，是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化。但是，对于数组元素的赋值，却没有办法直接监听

• MVVM的适用范围

  MVVM最大的优势是编写前端逻辑非常复杂的页面，尤其是需要大量DOM操作的逻辑，利用MVVM可以极大地简化前端页面的逻辑。

  然而对于以展示逻辑为主的页面，例如，新闻，博客、文档等，是不建议使用MVVM展示数据，因为这些页面需要被搜索引擎索引，而搜索引擎无法获取使用MVVM并通过API加载的数据。

  所以，需要SEO（Search Engine Optimization）的页面，不能使用MVVM展示数据。不需要SEO的页面，如果前端逻辑复杂，就适合使用MVVM展示数据，例如，工具类页面，复杂的表单页面，用户登录后才能操作的页面等等。

你或许不知道Vue的这些小技巧

文章地址：你或许不知道Vue的这些小技巧 Vue 实践过程中的几个问题

• Vue 数组/对象更新 视图不更新

  这篇文章作者给了个例子，其实还蛮常见的。虽然我暂时没有遇到这个问题…因为我比较常用里面的第三种方法：替换数组/对象…

  由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

  1. 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
  2. 当你修改数组的长度时，例如：vm.items.length = newLength

  官网文档：数组更新检测

  • Vue 包含一组观察数组的变异方法，会触发视图更新

  • 替换数组

  • 1 2 3

    this.$set(this.arr, 0, "OBKoro1"); // 改变数组 this.$set(this.obj, "c", "OBKoro1"); // 改变对象 this.arr.splice(newLength)

    当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用
    Object.defineProperty 把这些属性全部转为 getter/setter。

    Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。

    用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。这里需要注意的问题是浏览器控制台在打印数据对象时 getter/setter 的格式化并不同，所以你可能需要安装 vue-devtools 来获取更加友好的检查接口。

    每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

    vue中数组和对象更改后视图不刷新的问题

    总结：数据的改变必须能够触发set方法，否则无法响应数据变化。

• 一段取值的v-for

  <div v-for="n in 5"><span>这里会被渲染5次，渲染模板</span> </div>

  v-if尽量不要与v-for在同一节点使用(性能):

  v-for 的优先级比 v-if 更高,如果它们处于同一节点的话，那么每一个循环都会运行一遍v-if。

• Vue滚动行为

  这个问题涉及到官网文档的以下两篇

  HTML5 History 模式

  Vue Rouer 滚动行为

  • history模式

    http://yoursite.com/#/a/b //hash模式,即默认模式
    http://yoursite.com/a/b //history模式

• v-show和v-if

1. v-if是删除/添加Dom标签，不占据文档位置,v-show切换css的display属性，控制显示隐藏，还会占据文档Ω位置。

2. v-if会删除dom标签所以v-if性能消耗会高一些，需要频繁切换的话，使用v-show会好一点。

   ​

经常使用的场景：

• css3动画

  1 2 3 4 5 6 7 8 9 10 11 12

  .box { -webkit-transform: translate(0, 0); -webkit-transition: -webkit-transform 500ms; transform: translate(0, 0); transition: transform 500ms; } .box.move { -webkit-transform: translate(100px, 100px); transform: translate(100px, 100px); }

• js控制样式:使用 JavaScript 来管理状态，只需在目标元素上设置相应的类，让浏览器去处理动画

  box.classList.add('move')；

• 这种方法可以侦听元素的 transitionend 事件,兼容IE10

  1 2 3 4 5 6

  var box = document.querySelector('.box'); box.addEventListener('transitionend', onTransitionEnd, false); function onTransitionEnd() { // Handle the transition finishing. }

1. CSS3动画

略

2. 使用 JavaScript 编写动画

为什么要使用javaScript动画，因为js动画可以完全控制元素在每个步骤的样式。这意味着您可以在您认为合适时减慢动画、暂停动画、停止动画、倒退动画和操纵元素。

1
2
3
4
5
6
7
8

var target = document.querySelector('.box');
var player = target.animate([
  {transform: 'translate(0)'},
  {transform: 'translate(100px, 100px)'}
], 500);
player.addEventListener('finish', function() {
  target.style.transform = 'translate(100px, 100px)';
});

3. HTML5新增的定时器requestAnimationFrame

setTimeout和setInterval的问题是，它们都不精确。它们的内在运行机制决定了时间间隔参数实际上只是指定了把动画代码添加到浏览器UI线程队列中以等待执行的时间。如果队列前面已经加入了其他任务，那动画代码就要等前面的任务完成后再执行。

requestAnimationFrame采用系统时间间隔，保持最佳绘制效率，不会因为间隔时间过短，造成过度绘制，增加开销；也不会因为间隔时间太长，使用动画卡顿不流畅，让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果.

总而言之，requestAnimationFrame相当于是把动画交给浏览器去执行，浏览器会基于当前页面情况来自行决定最佳的帧速率，从而更合理地使用CPU。

它兼容Android4.4及以上，IE10及以上，兼容性其实跟css3动画差不多，所以可能要根据需求配合setTimeout做降级处理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

if(!window.requestAnimationFrame){
    var lastTime = 0;
    window.requestAnimationFrame = function(callback){
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0,16.7-(currTime - lastTime));
        var id  = window.setTimeout(function(){
            callback(currTime + timeToCall);
        },timeToCall);
        lastTime = currTime + timeToCall;
        return id;
    }
}

if (!window.cancelAnimationFrame) {
    window.cancelAnimationFrame = function(id) {
        clearTimeout(id);
    };
}

所以综上，我们可以在使用setTimeout的地方做动画时也使用这个新的定时器做优化。

4. Web Animations API

WAAPI是JavaScript 原生提供的的动画操作 API。

文章：

CSS Animations vs Web Animations API

• 兼容性：Dan Wilson(@danvilson) 写的WAAPI 浏览器兼容测试页面，目前只有极少部分的浏览器支持，但是 WAAPI 有完善的 Polyfill 方案。

• WAAPI的基础方法和jQuery的.animate()方法类似

  1 2	var element = document.querySelector('.animate-me'); element.animate(keyframes, 1000);

  animate 方法接受两个参数：关键帧和持续时间。与jQuery不同的是，它不仅具有浏览器原生支持等优点，而且还具有更高的性能。

  第一个参数关键帧必须是一个数组对象。每一个对象是一个动画关键帧。下面是一个简单的示例：

  1 2 3 4

  var keyframes = [ { opacity: 0 }, { opacity: 1 } ];

  ​

动画与性能

High Performance Animations

• 注意动画不能导致性能问题

  eg：

  给元素的 width 和 height 设置动画会改变其几何形状，并且可能导致页面上的其他元素移动或改变大小。此过程称为布局（在 Firefox 等基于 Gecko 的浏览器中称为自动重排），如果页面有很多元素，则可能开销很大。每当触发布局时，页面或其一部分通常需要进行绘制，这一般比布局操作本身更消耗资源。

  应尽可能避免给触发布局或绘制的属性设置动画。对于大部分现代浏览器，这意味着将动画限制为 opacity 或 transform，两种都可经浏览器高度优化；动画是由 JavaScript 还是由 CSS 处理并不重要。

  ​

  

  Chrome, Firefox, Safari 和 Opera 都对 transforms 和 opacity进行硬件加速。不幸的是，对于Internet Explorer 10+ 开启硬件加速的条件不是很明确，但值得庆幸的是当F12工具加入到IE11中的时候，这一点将变得清晰。

  在Blink和WebKit内核的浏览器中，对于在CSS的transition或者animation中有opacity的改变的元素，将会为其创建一个图层。但也有很多开发者使用translateZ(0)或者translate3d(0,0,0)来人为地强制性地创建一个图层(硬件加速)。然而，需要有节制地增加图层；如果过分的增加图层，那么将会导致闪烁。

  一个元素的变换，归结为改变它的位置，旋转角度和缩放。通常，位置的改变是使用left和top属性来改变的。问题是，如前面所述，left和top都会引起图层的变化，并且它的代价是昂贵的。更好的解决方案是使用不会引起图层变化的translate属性。

CSS 对比 JavaScript 的性能

命令式动画(JavaScript)vs说明式动画(css)

• JavaScript动画：

  它在浏览器主进程的JavaScript中运行。主进程已经忙于运行其他的JavaScript，样式的计算，布局还有绘制。所以进程内存在这资源竞争。这实质上增加了掉帧的风险，可能这一帧是你认为最重要的帧。

• CSS动画

  作为替代的方案，你可以用CSS来实现你的渐变和动画。最主要的好处就是，浏览器会对动画进行优化。如果有需要，它会创建图层。并且可以在主进程之外完成一些操作。这意味着，如果浏览器正在主线程上运行一些高开销任务，则这些动画可以继续运行而不中断。它最主要的缺点就是CSS动画相对于Javascript动画而言，缺乏表现力。并且很难有意义地组织动画，这意味着创造动画会带来较高的复杂度和错误率。

• 如果任何动画触发绘制、布局或同时触发这两者，则“主线程”将必须执行工作。这点同时适用于基于 CSS 和 JavaScript 的动画，并且布局或绘制的开销可能拖慢与 CSS 或 JavaScript 执行相关的任何工作，使问题变得无意义。

总结：

JavaScript动画对比CSS动画：

缺点：

1. JavaScript在浏览器的主线程中运行,而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞,从而造成丢帧的情况。
2. 代码的复杂度高于CSS动画

优点：

1. js动画控制能力强，可以完全控制元素在每个步骤的样式，如减慢动画、暂停动画、停止动画、倒退动画和操纵元素。
2. 动画效果比css3动画丰富,有些动画效果,比如曲线运动,冲击闪烁,视差滚动效果,只有JavaScript动画才能完成
3. JS大多时候没有兼容性问题

CSS动画对比JavaScript动画

缺点：

1. CSS动画只能暂停,不能在动画中寻找一个特定的时间点,不能在半路反转动画,不能变换时间尺度,不能在特定的位置添加回调函数或是绑定回放事件,无进度报告
2. 实现复杂动画代码冗长

优点：

1. 浏览器可以对动画进行优化。

   浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout,setInterval设置动画的优势主要是:

   1) requestAnimationFrame 会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒60帧。

   2) 在隐藏或不可见的元素中requestAnimationFrame不会进行重绘或回流,这当然就意味着更少的的cpu,gpu和内存使用量。

2. 强制使用硬件加速 (通过 GPU 来提高动画性能)

   渲染线程分为main thread(主线程)和compositor thread(合成器线程)。如果CSS动画只是改变transform和opacity,这时整个CSS动画得以在compositor thread完成(而JS动画则会在main thread执行,然后触发compositor进行下一步操作)在JS执行一些昂贵的任务时,main thread繁忙,CSS动画由于使用了compositor thread可以保持流畅,

3. 代码相对简单,性能调优方向固定

在CSS动画或JS动画触发了paint或layout时,需要main thread进行Layer树的重计算,这时CSS动画或JS动画都会阻塞后续操作，所以只有用上了3D硬件加速或修改opacity时,css3动画的优势才会体现出来。

了解一个属性（由于支持度不高，暂不运用到项目）：will-change：为web开发者提供了一种告知浏览器该元素会有哪些变化的方法，这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。 这种优化可以将一部分复杂的计算工作提前准备好，使页面的反应更为快速灵敏。

兼容性:IE不支持（含IE11），Android 4.4.4（含）以下不支持，ios9.2（含）以下不支持

其他参考文章：

CSS 对比 JavaScript 动画

深入理解定时器系列第二篇——被誉为神器的requestAnimationFrame

PS,去年回广州重新找工作，告别了待了两年的深圳。还记得当时来到现在这家公司时我没用过工作流，没在实际项目中使用自动化构建，没有在实际项目中使用除Jquery外的开发框架，也因为之前的项目单一即便公司背景不错但换工作的时候还是碰壁。入职前两个月项目组刚建不久，每天和一群后台/客户端小哥哥一起奋战，赶着发版，开始人生中第一次996，累但是很满足。新项目组只有我一个前端，对业务不熟悉时经常跑大部门另一个前端组取经，感谢他们对我的帮助，几乎一周上手。哈哈觉得我的适应能力和学习能力还是棒棒的，这也验证了一句话，实践是检验真理唯一标准，学习一样东西最好的方法是去使用它，恩。

好了，不废话了。

iView

iView是一套基于Vue.JS的高质量UI组件库，官网地址：任意门

整个运营系统是以这套ui框架搭建，我觉得做完一个后台运营系统是基本符合开发需求，当然也不是说可以都照搬，一些特殊功能还是要结合产品需求做变更。

由于基于Vue，所以IE兼容不是很好。所以我在入口index.js中做了IE判断提醒，我觉得这是必须的。

项目基本结构：

• css:不必多说，就是用来写自定义样式的

• data:用来存放iview框架，包括css和js

• html：通用，引入通用链接如JQuery等，配置title等,html代码只有一句 <div id = "app"></div>，到时vue渲染使用

• js：基本开发都是在这里

  • api：用来存储各个tab的接口请求

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

    var dataType = 'json'; var timeout = 15000; var url = '接口通用域名地址'; var request = function(opt) { return $.ajax({ method: opt.method || 'GET', dataType: dataType, timeout: timeout, url: url + opt.url, data: opt.data || null }); }; module.exports = { //数据1 data1:function(data){ return request({ url: '接口详细地址', data: data, }); } }

  • common

    

    api.js：这里其实跟上面的api文件夹作用一样，区别在于它全部写在了一个文件里，一开始是直接用的这个，后来随着项目的扩大及接口改版，觉得还是要根据功能单独提取出来比较好，这样也有利于团队一起维护；

    bus.js：这个不用多说，vue-router的中间组件

    routeList.js：这个是用来存储单页应用跳转地址

    1 2 3 4 5 6 7 8 9 10 11 12 13

    var page1 = require('module/page1/main'); module.exports = { routes: [ { path: '/page1', component: page }, { path: '*', redirect: '/home' } ] }

    tools.js:

    这个是用来区分权限和放一些公用的组件

    1 2 3 4 5 6 7

    var GetMenus =function(){ ... }//tab权限区分 module.exports = { GetMenus: GetMenus, ... };

    以上4个文件各司其职，可以看为通用组件。

    然后接着看，lib文件夹是我用来放公共组件的，比如一些处理ajax的公共方法，vendor用来放第三方组件，比如vue-qrcode,用来显示二维码，这里是在支付这一块需要用到，比如微信支付。

    然后各个主要需求内容其实都是在module文件里。这里就是可以像平时写vue页面一样，在每个页面写好你的功能就可以。

    整个框架基本就是这样，蛮明朗的。vue+iviewUi，前端+后台的对接，就可以完成这套运营系统了。各个页面的信息基本独立，公共的部分提取出来，一些需要传递的信息可以使用busEvents，无需引用vuex，其次ajax、功能模块单独区分，后期维护和其他人接手的话基本无成本，查找也方便。其他的使用在iview官网都可以找到解决办法，然后接下来介绍下其他特别的地方。

其他

在使用iView有没有遇到问题，当然有…有些是踩到的小坑，有些是iview满足不了你的需求，你要自己解决。

• <Time-picker format="HH:mm" type="timerange" v-model="timeInterval" placeholder="推荐时间段" style="width: 400px;"></Time-picker>

  当timeInterval定义为字符串timeInterval:''会把页面搞崩，因为动态监听的值类型问题，必须为数组。

• 二级联动

  iView里有二级联动的组件cascader,但是是在一个选择框进行分级，我的需求是父子选择框是独立的选择框，所以仍然用到select

  所以这里要自己处理逻辑：

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  computed: { self: function(){ return this; }, //第二个选择框 levels:function(){ var levels =[],selectedDepart = this.$data.category_id; this.$data.categorys.forEach(function(d){ if(d.id == selectedDepart){ levels = d.levels; } }); return levels; }, },

  1 2 3 4 5 6 7 8 9 10 11 12

  <!--父选择框--> <Form-item label="选择品类" prop="coefficient"> <Select v-model="category_id" style="width:350px"> <Option v-for="item in categorys" :value="item.id" :key="item.id">{{item.category_name}}</Option> </Select> </Form-item> <!--子选择框--> <Form-item label="段位"> <Select v-model="level1" style="width:350px"> <Option v-for="item in levels" :value="item.level" :key="item">{{item.name}}</Option> </Select> </Form-item>

• 待续…

  ​

​ 其实在项目中会遇到各种情况，比如你获取到的数据跟呈现在页面的数据可能是两种形式，中间的处理当然是需要自己写，框架拯救不了你。还有一些东西是可以利用框架来进行拓展，比如Modal弹框你可以用来做查看图片，具体情况具体分析。因为我没使用过elementUI，所以我也不知道具体的区别在哪里，简单看文档的话感觉是很相似的。无论是用iView还是其他，这些说到底都是一种辅助作用，简洁开发流程和优化呈现方式，作为前端应该就算它们提供不了功能也要能自己写出来，不能以框架没有做到为借口。打个很简单的比方，Checkbox可以用于多选，它也提供了一个全选的功能，那如果没有提供的话，我们也应该自己能写得出。

1
2
3
4
5
6

<i-form inline>
    <Form-item>
        <Checkbox style="margin-left: 10px;" v-model="selectAll"  v-if="ifselectAll">本页全选</Checkbox>
        <p style="margin-left: 10px;" v-else>已选择{{muchcount}}位</p>
     </Form-item>    
 </i-form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

data: function () {
   return {
     self: this,
     columns: [{
         title: '选择',
         key: 'choose',
         width: 50,
         render: function (row, columns, index) {
           return '<Checkbox  disabled v-model="self.muchids.num' + index + '"   @on-change="ifchange(' + row.id + ')" v-if="self.selectAll"></Checkbox><Checkbox  v-model="self.muchids.num' + index + '"   @on-change="ifchange(' + row.id + ')" v-else></Checkbox>'
         }
       },
   ]},
   ...
   ...
   methods:{
       //多选选择判断
   ifchange: function (id) {
     var self = this;
     var index = self.muchList.indexOf(id)
     console.log(index)
     if (index != -1) {
       self.muchList.splice(index, 1)
     } else {
       self.muchList.push(id);

     }
     self.ifselectAll = self.muchList.length ? false : true;

     self.muchcount = self.muchList.length;
     console.log(self.muchList)

   },
   }

这样我就自己写出了一个全选的功能：

以上只是个栗子，建议可以直接用checkbox即可。框架和工具是为了辅助我们更好的开发，而不是去限制我们开发，这是我在这个过程中意识到的最大的收获。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<div id="app">
    父组件：
    <input v-model="msg">
    <hr>
    子组件：
    <child :message="msg"></child>
</div>
 
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'Hello World'
        },
        components:{
            'child':{
                props:['message'],
                template:'<input v-model="message">'
            }
        }
    })
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<template>
    <child :msg="message"></child>
</template>

<script>

import child from './child.vue';

export default {
    components: {
        child
    },
    data () {
        return {
            message: '123';
        }
    }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<template>
    <div>{{msg}}</div>
</template>

<script>
export default {
    props: {
        msg: {
            type: String,
            required: true
        }
    }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<div id="app">
    <parent></parent>
</div>
 
<!--父组件-->
<template id="parent-template">
    <div>
        <span>父组件的数据是：</span>  ---> `parentMsg`
        <child @get-message="get"></child>
    </div>
</template>
<script>
    //注册父组件
    var Parent = Vue.component('parent',{
        template: '#parent-template',
        data(){
            return {parentMsg:'111'}
        },
        //接收子组件传过来的数据
        methods:{
            get:function(msg){
                alert(msg);
                this.parentMsg = msg;
            }
        }
    });
<script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<!--子组件-->

<template id="child-template">
    <div>
        <span>子组件的数据是：</span>  ---> childMsg
        <button @click="send">发送</button>
    </div>
</template>
<script>
    //注册子组件

    var Child = Vue.component('child',{
        template:'#child-template',
        data(){
            return {childMsg:'99999'}
        },
        //把子组件数据发送给父组件
        methods:{
           send:function(){
               this.$emit('get-message', this.childMsg)
            }
        }
    });

var vm = new Vue({
      el:'#app',
      components:{
          'parent': Parent
      }
  });

</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

var eventBus = {
    install(Vue,options) {
        Vue.prototype.$bus = vue
    }
};
Vue.use(eventBus);


//分发事件的组件A
methods: {
  todo: function () {
    this.$bus.$emit('todoSth', params);  //params是传递的参数
    //...
  }
}

// 监听事件的组件B
created() {
  this.$bus.$on('todoSth', (params) => {  //获取传递的参数并进行操作
      //todo something
  })
},
// 最好在组件销毁前 清除事件监听
beforeDestroy () {
  this.$bus.$off('todoSth');
},

​ 或者将 事件中间件单独拎出来（需要注意在组件里引用）

​ bus.js:

1
2

var bus = new Vue();
module.exports = bus;

​ 分发事件的组件A：

1
2
3
4
5
6
7
8
9

 import bus from '../common/bus.js'
 methods:{
sendData(){
this.data = "123"
}
 }
 beforeDestroy() {
     bus.$emit('pbgdata', this.data);//'pbgdata'为组件的eventName，用于区分监听不同的组件内容
   }

​ 接收事件的组件B：

1
2
3
4
5
6
7
8
9
10
11
12
13

import bus from '../common/bus.js'

created() {
    bus.$on('pbgdata', (data) => {
      console.log(data)//这就是从A组件得到的数据

    })
    
    
  },
 beforeDestroy() {
    bus.$off('pbgdata');
  },

从上面可以看出，我是在beforeDestroy()去分发事件，同时在B组件的created去监听事件，在beforeDes()去销毁，这是为啥？
这里就是遇到的另一个问题：

vue-router中使用EventBus传值的坑

一开始我在A组件得到数据后就使用$emit分发，然后第一次在B的created里并没有拿到（无销毁操作），第二次进入才拿到，且多次进入会打印多行结果。

vue-router切换的时候，会先加载新的组件，当新的组件渲染好但是还没mount的时候，销毁旧组件，然后再挂载新组件，也就是说当B页面的生命周期进行到beforeMount的时候，下一步走到的就是A页面的beforeDestory方法和接下去的destroyed方法
所以我们再B组件的created方法里去使用$on 去监听自定义事件时$emit事件已经发出去了，这个时候监听器还没有注册，所以才需要再A的beforeDestroy或者destroyed去执行$emit。
以下为找的的vue-router切换时相关生命周期（网图）：

总结下就是这样的步骤：

新组件: beforeCreate
新组件: created
新组件: beforeMount
旧组件: beforeDestory
旧组件: destroy
新组件： mounted

其他：当应用足够复杂情况下，请使用vuex进行数据管理。

参考链接：

vue-router中使用EventBus传值需要注意到的问题

聊聊 Vue.js 组件间通信

network返回Provisional headers are shown

查看发现

就是说根本没有拿到接口返回的数据，甚至根本可能没有发成功。

网上查都推荐看chrome://net-internals，那就来看下吧。

老实说一堆东西我看的也是半知不解，但是有几行觉得是关键：

可见发送头部是成功的，问题出在解析那里，read headers时间太长，直接导致cancelled，也就是说，是服务器相应太慢导致异常，那跟我前端应该没啥关系吧。

继续回到页面，15s后取消请求，为什么是15s，因为我的ajax的timeout超时设置了15s，把这个时间延长至5分钟，再看下原因。这次发现后端在2分钟后给我返回504，跟上面的解释对的上了。

后面就是告知后端同学查原因，后端反馈是这个用户名下列表数据量过大，导致查询过慢，直接超时，后面做了优化，已正常使用。

导致Provisional headers are shown其实原因可能多样，比如插件比如被某些扩展如 Adblock 给拦截比如被墙，还是要具体情况具体分析。

先丢一堆问题：

• 什么是WebSocket？有什么用？
• 什么是socket.io，跟WebSocket的关系？
• socket跟Ajax的区别？
• 怎么使用socket.io?

WebSocket

WebSocket是对在服务器和客户端之间实现双向实时通信问题的响应。就是在web服务器和浏览器之间保持持久打开，相当于建了一座桥，让两边的信息可以随时推送数据。它的核心就是“实时”。

Socket.IO

socket.io是NodeJs的一个模块，为了可以方便使用WebSocket问题。它提供服务器和浏览器之间的响应的组件，只需要一个模块就可以给应用程序加入对WebSocket的支持，并且，Socket.IO支持4种协议：WebSocket、htmlfile、xhr-polling、jsonp-polling，它会自动根据浏览器选择适合的通讯方式，也因此可以解决浏览器对WebSocket的支持问题。

总而言之，它可以很方便构建支持WebSocket的模块，把应用程序实时通信变得简单，而且几乎可以支持所有常用的浏览器实现。

它跟Ajax的区别在于，它提供的功能更多，比如很容易实时地将数据推送给客户端。并且WebSocket的一大特性就是实时连接，这是持久的过程，而Ajax则是每次都需要建立连接。

但是它们的服务目标也是不同，所以并不能说就只用socket。Ajax适合只需要时不时请求一下数据，并且可能需要缓冲的场景。

聊天室例子

通过例子来学习是最快的理解方式，这里选了一个聊天室的例子。

安装

服务器端使用socket.io:

nodejs服务器端安装：npm install socket.io
安装之后就可以require模块来使用了:

var io = require('socket.io');

客户端安装直接在页面想引用外部链js那样即可：<script src="/socket.io/socket.io.js"></script>

思路

聊天室的逻辑点其实很简单，就是进入房间，开聊，退出房间。

构建

案例参考文章socket.io+express多房间聊天应用))

这个案例很容易了解socket.io的原理，帮助我更好地理解。

原demo有些bug，比如在线用户昵称不显示（room.hbs）：

1
2
3
4
5
6
7
8

// 监听系统消息
      socket.on('sys', function (sysMsg, users) {
        var message = '<div class="sysMsg">' + sysMsg + '</div>';
        $('#msglog').append(message);

        $('#count').text(users.length);
        $('#users').text(users);
      });

原因是users打印出来其实是数组，并不能直接text显示在页面上，需要改为

1
2
3

var userArray= users.join(",");

 $('#users').text(userArray);

另外css样式是直接写在room.hbs里的，不方便拓展，所以我把它提出来, 在public里新建css文件夹，style.css。

room.hbs引用<link rel="stylesheet" href="/css/style.css">

在app.js中说明引用静态资源目录：

1
2
3

//静态资源目录

app.use(express.static('public'));

socket.io事件

socket中文手册

可以帮助我们把多个js文件打包为1个入口文件，并且可以按需加载。也就是无需担心太多组件导致过多的http请求。同时webpack也可以编译.vue文件，如果没有使用一个loader去转换我们的.vue文件里的style、js、html，浏览器无法识别。

模块热加载

webpack的模块热加载可以为单页应用带来便利，当我们修改代码刷新页面后，应用里所有状态就都没有了，需要再重新跑一次。而模块热加载就是当你修改代码后，页面不会被刷新，状态也可以保留下来。

一.安装

1
2
3
4
5
6
7

//全局安装

npm install -g webpack

//安装到你的项目目录

npm install --save-dev webpack

二.使用

1.建立一个空文件夹，暂命名为webpack；

2.建立一个package.json的的npm说明文件，将用来记录当前项目的依赖模块，自定义脚本任务等。也可以在终端使用npm init自动建立；

。

4.文件对应的内容如下：

• index.html文件只有最基础的html代码，它唯一的目的就是加载打包后的js文件（bundle.js）:

1

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Webpack Sample Project</title></head><body><div id='root'></div><script src="bundle.js"></script></body></html>

• Greeter.js只包括一个用来返回包含问候信息的html元素的函数。

1
2
3
4
5

// Greeter.jsmodule.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};

• main.js用来把Greeter模块返回的节点插入页面。

1
2

//main.js var greeter = require('./Greeter.js');
document.getElementById('root').appendChild(greeter());

5.通过配置文件来使用webpack

在当前的webpack文件夹下新建一个名为webpack.config.js的文件，内容如下(注意entry里的引用写法，这里跟原文有差):

1
2
3
4
5
6
7
8
9
10
11
12
13

module.exports = {

  entry:  "../webpack/app/main.js",//已多次提及的唯一入口文件

  output: {

    path:  "public",//打包后的文件存放的地方

    filename: "bundle.js"//打包后输出文件的文件名

  }

}

6.编译

在webpack文件夹下打开命令行，输入

webpack

编译成功后打开index.html就可以看到内容。

7.更快捷的打包方式

在package.json里进行配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

{
  "name": "package",
  "version": "1.0.0",
  "description": "test 1.0",
  "main": "index.js",
  "scripts": {
    "start": "webpack" //把npm的start命令指向webpack命令

  },
  "author": "Anchen",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^1.13.3"
  }
}

然后使用npm start 命令就可以，注意注释最后要去掉，否则会有一堆错误（亲测）。

一.页面在浏览器上是怎么渲染的(以普通静态页面为例）

浏览器首先获取html页面->分析这个页面（标签/属性/节点)->Dom结构->解析css->css+Dom每个节点的位置和大小等几何信息（layout)->css paint（绘制成位图）->传输到GPU渲染到屏幕（composited)。

reflow一步发生于layout，repaint是对应css paint这个步骤。

所以，在解析css开始的步骤，修改的css元素是在越前的步骤解析的话会越耗性能，因为它及其它后面的步骤将会被重新修改一遍。

换句话来说，Dom操作触发频繁reflow（layout）和repaint，layout发生在repaint之前，相对会造成更多性能损坏。

那么，哪些元素会影响layout、paint和composited？

举些我们很常用的例子：

影响layout：

margin/padding/width/height/display/border/top/left/right/bottom/position/font-size/text-align/line-height/font-weight/font-family/overflow…

影响repaint：

color/border-style/visibility/backgrounf/text-decoration/border-radius/outline/box-shadow/backgrounf-size…

注意：

【设置动画元素为absolute或fixed：

• position:static或position:relative元素应用动画效果会造成频繁的reflow。
• position:absolute或position:fixed的元素应用动画效果只需要repaint.】

关于以上括号内，出处应该是国外翻译为中文，很多文章都这么写，但经过测试和与朋友的讨论，发现这么说好像有问题。

如下为relative的渲染：

如下为absolute的渲染:

私以为，position:static或position:relative元素应用动画效果和position:absolute或position:fixed的元素应用动画效果都会造成它自己的元素触发这三个阶段，只是position:static或position:relative元素应用动画效果会造成文本流的其他元素reflow，而position:absolute或position:fixed的元素应用动画效果只会造成文本流其他元素repaint。

具体可看css查询

二.硬件加速——把GPU利用起来

GPU（图形处理器），是专为执行复杂的数学和几何计算而设计的，这些计算是图形渲染所必需的。通常CPU是双核四核，而GPU是上百成千，所以它的并发计算能力越强。偏移、放大缩小、旋转等这些操作都是矩阵变换，交给GPU完成，就会越快完成。

在GPU的众多特性之中，它可以存储一定数量的纹理（一个矩形的像素点集合）并且高效地操作这些纹理（比如进行特定的移动、缩放和旋转操作）。这些特性在实现一个流畅的动画时特别有用。浏览器不会在动画的每一帧都绘制一次，而是生成DOM元素的快照，并作为GPU纹理（也被叫做层）存储起来。之后浏览器只需要告诉GPU去转换指定的纹理来实现DOM元素的动画效果。

而浏览器在进行硬件加速时，是根据css属性为元素生成layers，将layers作为texture从CPU上传到GPU，当改变layer的transform、opacity等属性时，渲染会跳过layout、paint这些步骤，直接通知layer做变换，即通过硬件加速，浏览器将需要硬件加速的元素放在一个新的复合层（composited layer）中渲染，跟主文档不是一个层中，所以可以跳过一些步骤加速生成位图绘制。

综上，简单总结就是，使用硬件加速一是可以减少CPU向GPU传输位图的时间，因为它只需绘制一次就作为GPU纹理存储起来；二是减少CPU进行layout和paint的时间。

现在，像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速，当它们检测到页面中某个DOM元素应用了某些CSS规则时就会开启，最显著的特征的元素的3D变换。我们可以设置translate3d的值来告诉浏览器，另外，现在也可以使用will-change这个属性，它会告诉浏览器哪个属性未来即将改变，让浏览器自己来做优化。

1
2
3
4
5

.animate{

    will-change:transform,opacity

}

除此之外，凡可以创建复合层（composited layer）规则的元素都可以开启硬件加速，列举如下：

• 3D或透视变换的css属性（animation，transition师兄opacity，transform动画）

• 使用加速视频解码的元素

• canvas

• 使用css filters的元素

• 元素有一个包含复合层的后代节点，那么此元素也将创建复合层

• 元素有一个z-index较低且包含一个复合层的兄弟元素（即该元素在复合层上面渲染）

三.硬件加速的探讨

首先我们怎么查看一个页面是否启用了硬件加速，其实很简单。以chrome为例：

可以看到页面蓝色框被分成一块一块，实际为浏览器渲染的位图，它绘制页面时只会绘制可视区域一定范围内的东西，而如果有黄色的框，则代表这个元素被放到特殊的复合层中渲染，即启用了GPU。

那么通过这个方式我们了解到复合层的数量，这是有意义的，因为连接CPU和GPU的总线带宽不是无限的，需要关注数据在CPU和GPU之间的传输，避免通道拥挤。所以回答第二点的最后一个问题，当页面上太多元素使用到3硬件加速时，反而会阻碍页面的加载，造成“卡顿”的现象。

在上面我们讨论到了创建复合层开启硬件加速的规则，最后两点（元素有一个包含复合层的后代节点，那么此元素也将创建复合层

以及元素有一个z-index较低且包含一个复合层的兄弟元素（即该元素在复合层上面渲染））其实往往会被忽略，造成许多不必要的元素也使用3d加速，比如下图：

这是我访问某一个页面较长的电商网站，发现页面上大量存在3d加速元素，但其实除了头部的轮播动画，并没有其余动画。经查询得知，头部动画运用到3d加速，但同时导致下面其他相对和绝对定位的元素都被放在复合层中。解决方法可以在头部轮播加上层级z-index，人为提升动画元素的z-index，让浏览器知道这个元素的层排序，就不会把其他z-index比它高的元素也弄到复合层中了，加上后页面如下：

.

四.总结

经过以上讨论，在前端web渲染上应尽量减少reflow和repaint。css动画可以适当开启3d（硬件）加速提升动画流畅性，但要注意使用方法，我们可以在动画上增加层级来告诉浏览器，避免不必要的GPU阻塞。

参考文献：

css硬件加速也有坑 ——张云龙

• C.pototype用于建立由new.C创建的对象的原型；
• Object.getPrototypeOf(obj)是ES5中用来获取obj对象的原型对象的标准方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function User(name,passwordHash){

this.name = name;

this.passwordHash = passwordHash;

}

User.prototype.toString = function(){

return "[User"+this.name+"]";

};

User.prototype.checkPass = function(password){

}

var u = new User('ss','ssssss123456');

我们给USer函数添加两个方法到User.prototypr对象中，当我们使用new操作符创建User的实例时，产生的对象u得到了自动分配的原型对象。

u.name和u.passwordHash返回的是对象u的直接属性当前值，如果没有找到，才会去接着找u的原型对象，即User.prototype中的方法。

构造函数的prototype属性用来设置原型，那检测原型可以这样做：

Object.getPrototypeOf(u) === USer.prototype;//true

实例分析

那么怎么运用呢？

最近写了一个抽奖小游戏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

function GiftsGame(jTarget, lotteryCode) {

    this.wrapp = jTarget;

    this.isWinner = false;

    this.tipMsg = "";

    this.responseCode = null;

    this.isLogined = false;

    this.code = lotteryCode;

    this.lotteryPrize = [];

    this.isGoing = 0;

    this.hasChances = 1;

    this.userLevel = 0;

    this.isBegining = true;

    this.theEnd = false;

    var _this = this;

     this.init();

   

     _this.cookieValue = "";

} // GitGame函数保存一系列变量

以更新用户中奖名单的功能来说，通过建立原型方式调用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

GiftsGame.prototype.updateWinner = function() {

        var _this = this;

        setTimeout(function() {

            });

        }, 1);

            /**

             * 混淆用户pin

             */

       function confusePin(pin) {

       }

        /**

         * 滚动显示获奖信息

         * @param wrapper

         * @param time

         */

    function autoScorll(wrapper, winnerLen) {

     }

    }

这种方法有什么好处呢，我是这么理解的，对于这个抽奖小游戏，大主体就是这个GiftsGame，实际上可以看成只有这个函数，下面都是这个函数的各个功能，这样的话就很有归纳和继承性，并且不会影响除这个游戏外的抽蛋小游戏和抓鸡小游戏的东西。

一.js中的transitionend事件

首先JavaScript有一个transitionend事件，在css完成过渡后触发。

与css3的transition一样，需要加浏览器前缀：webkitTransitionEnd(chrome/safari3.1-6.0)、mozTransitionEnd(Firfox)、oTransitionEnd(opera)/transitionend(IE9+)。

栗子：

1
2
3
4
5

demo.addEventListener('webkitTransitionEnd',function(){

    ...

})

注意：addEventListener（）方法是ie8及以下浏览器不支持。

同时，transition动画是不具有start的事件，只有transitionEnd事件。

但是animation动画有animationend、animationiteration、animationstart三个事件，分别对应动画结束播放触发、动画重复播放触发和动画开始播放触发。

这些事件都是用element.addEventListener('事件',end,false)来捕捉。

animationend和transitionend有一个明显的区别是：animationend会在元素的整个动画执行完毕再触发，而transitionend会每一个样式属性值改变一次状态触发一次，不同的属性值改变会累计触发，

比如下面的例子，webkitAnimationEnd事件只在元素向右移动,然后向左返回之后触发一次,而webkitTransitionEnd事件将在元素向右移动之后触发一次,在元素向左返回之后再触发一次。

栗子

以上为js的总结，接下来继续bootstrape。

二.bootstrape的transition

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

+function ($) {

  'use strict';

  // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)

  // ============================================================

  function transitionEnd() {

    var el = document.createElement('bootstrap');

    var transEndEventNames = {

      WebkitTransition : 'webkitTransitionEnd',

      MozTransition    : 'transitionend',

      OTransition      : 'oTransitionEnd otransitionend',

      transition       : 'transitionend'

    }//把所有浏览器前缀整合为一个对象

    for (var name in transEndEventNames) {

      if (el.style[name] !== undefined) {

        return { end: transEndEventNames[name] }

      }

    }//for遍历前缀，判断css属性是否存在

    return false // explicit for ie8 (  ._.)，若不存在css属性则返回，此时可添加回调函数

  }

  $.fn.emulateTransitionEnd = function (duration) {

    var called = false;//transitionend时间是否已经触发的标识

    var $el = this

    $(this).one('bsTransitionEnd', function () { called = true })//true为已经触发

    var callback = function () {

 if (!called) (el).trigger($.support.transition.end) }//未触发，强制触发

    setTimeout(callback, duration)//一段时间后检测是否触发，因为有时属性值没有发生改变并不会触发，但是在页面过程中可能后来会执行，确保每次回调都被调用需要使用定时器

    return this

  }

  $(function () {

    $.support.transition = transitionEnd()

    if (!$.support.transition) return

    $.event.special.bsTransitionEnd = {

      bindType: $.support.transition.end,

      delegateType: $.support.transition.end,

      handle: function (e) {

        if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)

      }

    }

  })//自定义事件，添加事件回调可以这样element.one('bsTransitionEnd',function(){}).emulateTransitionEnd(1000);

}(jQuery);

以上为原版代码。

页面一开始采用是这一段：

同事扒来的,总之原理是改变meta标签里的intial-scale来进行整个画布的缩放。

之前有两个项目都用过适用，所以我也没多想就直接加上去了。

其实还是各种美好，知道遇到了升级版本为9.3的iphone中的微信内置浏览器，当intial-scale不是1，滑屏时会整个页面左右移动。然后我正好有一个左右移动的类轮播，于是体验就不好了。最后查到是intial-scale的问题后，果断放弃这一大段代码，重新加了几句调整html的根字体大小：

但是淘宝其实采用的就是以上做法，并没有出现上述问题，记在这里，后续研究更新。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<script>

      //重置html字体大小

      var _resize = function(){

        var html = document.documentElement,

          w = html.clientWidth/640, w =16*w;

        html.setAttribute('style', 'font-size:' + w + 'px');

      }

      _resize();

      window.addEventListener('resize', _resize);

</script>

这样的目的其实一样达到了，而且微信也美好了。

sass只需要设置:

1
2
3

$fontRem: 16px;

@function rem($px) { @return $px / $fontRem * 1rem; }

就可以很方便的使用啦。

好了，说完入场就可以进入正题，开始总结啦~

1.为什么用rem

rem就是一个相对于根元素的字体大小的单位，还有一个跟它挺像的em，em是相对于父元素字体大小的单位，所以，一个页面根元素的字体大小是固定的，但是每一个元素它的父元素字体大小却不一定都一样，因此更推荐使用rem。

所以，改变html的根元素大小，整个页面的尺寸也会相应的改变，那么我们根据屏幕尺寸和html根元素比例，就可以做到适应屏幕的大小了。

那么这个比例怎么算的，这就要看设计稿了，加入设计稿是640px，那么遇到640px的屏幕宽，比例就是1…以此类推

所以上面的js其实就是动态来根据比例设置根元素的字体大小，默认设计稿为640，比例为w = html.clientWidth/640;,然后定一个基数，为16px，所有有w=16*w;html.setAttribute('style', 'font-size:' + w + 'px');

2.所有单位需统一

有一个bug是，某次设置了一个块级元素的height：4rem；然后没有设置宽度，那么宽度就是默认的100%。

这样的话实际缩放是没有等比例缩放的，在某些分辨率下会出现错位。所以使用rem缩放的话，一定要记得宽高都需要设置好。

贴一个自己最近做的项目例子吧:smartphoneM端频道页)

首先来个场景，有一个页面的价格需要调用ajax的接口来拉取，拉取的原理是，每个商品的商品id发给后台对应拉到每个商品的价格然后填写。

于是我定义了一个Prize的函数：function Prize() {}。

然后首先第一步，取到每个商品的id并且拼在一起一次性请求：（这个怎么拼看ajax的发送规则，比如这个例子是商品id,使用”,”分割）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

var _value = "";

var selector = $('.list li');

selector.each(function(_idx) {

if (_idx == 0) {

_value = $(this).attr('skuid');

} else {

_value = _value + ',' + $(this).attr('skuid');

}

value = $.trim(value);

})

第二步就是发送ajax请求并返回得到的价格：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

$.ajax({

type: 'GET',

url: 'ajax地址',

data: {

'skuIds': _value

},

dataType: 'jsonp',

success: function(data) {

console.log(data)



}

})

第三步就是请求成功后对页面的输出，success里的函数就是写成功后要做的事：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

success: function(data) {

console.log(data)

selector.each(function(_index) {

var sku = .trim((this).attr('skuid'));

for (var i = 0; i < data.data.length; i++) {
 //for循环是遍历每一个商品id，然后if语句中要多一步验证返回的商品id和当前的id是不是同一个，如果是则写入价格， data.data[i].Price的Prize是因为返回字段的定义，有Prize字段存储，具体看ajax返回的内容进行程序编写。

var eachData = data.data[i];

var eachprice = data.data[i].Price;

if (sku == eachData.skuId) {

(this).find('.price  .price-cur').html("" + eachprice);

}

}

})

}

顺便说下each方法和$.each()函数，我最喜欢用例子来理解了：

1
2
3
4
5

$('.tag').each(function(){
    if($(item).find('span').text()!=''){
        $(item).show()'
    }
})

1
2
3
4
5

$.each($('.tag-discount'),function(index,item){
    if($(item).find()'span'.text()!=''){
        $(item).show();
    }
})

这两个的效果一样，但是$.each()函数不同于JQuery对象的each()方法，它是一个全局函数，不操作JQuery对象，把对象作为第一个参数，以一个回调函数作为第二个参数：第一个为对象成员或者数组索引，第二个为对应变量或者内容。

主要探讨的是以下事件：delegate()、bind()、on()通过例子和对比来加深印象。

bind()

$('a').bind('click',function(){alert("ok");})

其实可以简写为：

$('a').click(function(){alert("ok");})

这样就好懂多了吧。

bind有两个问题：

1.当匹配的元素过多，比如页面有40个a标签，就得执行40次绑定，影响性能；

2.对于页面上还未存在的元素，就算动态添加后，是无法执行这个绑定事件的。

而delegate()恰好可以解决这两个问题。

elegate()

$(*selector*).delegate(*childSelector*,*event*,*data*,*function*)

delegate()方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理，使用这个方法的事件处理程序适用于当前或未来的元素。

这是怎么理解呢？对比一下bind：

$('a').bind('click',function(){alert("ok");})

这是bind的用法，给页面的a元素绑定一个点击事件，点击后弹出内容。

那么用delegate是这样的：

$(document).delegate('a', 'click', function() { alert('ok;)});

bind直接将方法绑定到独立的元素上，但它不能将方法绑定到一个暂时还未出现的元素上。而delegate方法是将事件方法绑定到一个需要作用的元素它的父元素上，那么这个元素是否已经存在都可以被处理。

另外，将一个方法绑定到一个或者一组父元素比直接为页面上的每个元素（特别是数量很多的情况下）绑定方法无疑更有效率。

on()

live()方法在jq1.9版本已经被删除，用on来代替。

之前我们这么写：

$('a').live('click',function(){alert("ok");})

现在用on需要这么写

$(document ).on('click','a',function(){alert("ok")})

再解释一遍，我的页面有一个id为a的div，我将要在它里面动态添加一个class为b的子元素，然后给这个b绑定一个事件，我需要这么写：

$('#a').on('click','.b',function(){}）

是不是跟delegate()很像…

它也可以这么使用：

$('a').bind('click',function(){alert("ok");})

==

$('a').on('click',function(){alert("ok");})

也就是说on()方法可以替代live()，可以替代delegate(),也可以替代bind().

综上，on()是最为推荐的方法。但是根据情况仍然可以选择其他适合的替代写法。

除此之外，如需溢出事件绑定，可以用off()方法：

$('a').off('click')

添加只运行一次的事件然后移除，可使用one()方法。

w3cschool的例子解释：

call()方法的第一个参数用作this的对象，其他参数都直接传递给函数本身。

1
2
3
4
5
6
7
8
9
10
11

function sayColor(sPrefix,sSuffix) {

    alert(sPrefix + this.color + sSuffix);

};

var obj = new Object();

obj.color = "blue";

sayColor.call(obj, "The color is ", "a very nice color indeed.");

• 对象obj的color属性等于blue；
• 调用call()方法时，第一个参数是obj，即赋予sayColor()函数的this关键字值是obj.
• 第二个和第三个参数是字符串，与sayColor()函数中的参数sPrefix和sSuffix匹配；

apply()方法有两个参数，用作this的对象和要传递给函数的参数的数组

1
2
3
4
5
6
7
8
9
10
11

function sayColor(sPrefix,sSuffix) {

    alert(sPrefix + this.color + sSuffix);

};

var obj = new Object();

obj.color = "blue";

sayColor.apply(obj, new Array("The color is ", "a very nice color indeed."));

• 调用apply()方法时，第一个参数仍是obj，即sayColor()函数中的this值是obj；
• 第二个参数则与sayColor()对应参数相匹配；

结合这两个例子，其实就可以明白call与apply就是为了改变对象的this。它们的第一个参数都是要传入给当前对象的对象（this），后面的参数都是传递给当前对象的参数。比如方法里写了this，普通调用这个方法这个this的可能是window，而如果用call，第一个参数写啥，this就是啥。

再举一个例子更浅显地说明它们的作用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function People(){}

   People.prototype={

   age:"22",

   card:function(){

     console.log("I am "+this.age);

   }

} 

var xiaoming = new People();

xiaoming.card();

现在我们有另外一个人xiaohong={age:”20”}。可以直接用call或apply：

xiaoming.card.call(xiaohong)

这样我就不需要重新定义xiaohong了。

那么call和apply有什么区别呢，其实只在于两个函数接受的参数形式不同。

Function.apply(obj,args)方法能接受两个参数：obj这个对象将代替Function类的this对象；args讲作为参数传递给Function。

Function.call(obj,[arg1,arg2..])：obj这个对象将代替Function类的this对象；[arg1,arg2..]：这个是一个参数列表。

总而言之，即是apply传入的是一个参数数组，即将多个参数组合成为一个数组传入，而call则作为call的参数传入。func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3])